<template  lang="pug">
  .container
    .mainContainer
      v-ginsengNav
      .content
        .a-amount
          .assets
            span.a-title(data-title="参王:") 参王:
            ul
              li
                span(data-title="一类参王") 一类参王&nbsp;
                span(data-title="") {{userInfo?userInfo.one_ginseng:0}}
                span(data-title="株") 株
              li
                span(data-title="二类参王") 二类参王&nbsp;
                span(data-title="") {{userInfo?userInfo.two_ginseng:0}}
                span(data-title="株") 株
              li
                span(data-title="三类参王") 三类参王&nbsp;
                span(data-title="") {{userInfo?userInfo.three_ginseng:0}}
                span(data-title="株") 株
          .assets
            span.a-title(data-title="极品参:") 极品参:
            ul
              li
                span(data-title="一类极品参") 一类极品参&nbsp;
                span(data-title="") {{userInfo?userInfo.one_best_ginsen:0}}
                span(data-title="株") 株
              li
                span(data-title="二类极品参") 二类极品参&nbsp;
                span(data-title="") {{userInfo?userInfo.two_best_ginsen:0}}
                span(data-title="株") 株
              li
                span(data-title="三类极品参") 三类极品参&nbsp;
                span(data-title="") {{userInfo?userInfo.three_best_ginsen:0}}
                span(data-title="株") 株
          .a-worth
            span.aw-title(data-title="总价值：") 总价值：
            span.aw-value(data-title="") {{(listmost || 0)+gametype}}
            .aw-btn(data-title="一键卖出" @click="changePage();") 一键卖出
        .salesRecord
          .sr-title(data-title="售出记录") 售出记录
          .list-head()
            span.lh-title1(data-title="编号") 编号
            span.lh-title2(data-title="参王") 参王
            span.lh-title3(data-title="极品参") 极品参
            span.lh-title4(data-title="总价值") 总价值
            span.lh-title4(data-title="审核") 审核
            span.lh-title5(data-title="售出时间") 售出时间
          ul(v-if="list.length>0")
            li(v-for='(item,index) in list' :key='index')
              span.lh-title1(data-title="1") {{index+1}}
              span.lh-title2(data-title="37株") {{item.ginsengTotal}}株
              span.lh-title3(data-title="30株") {{item.bestGinsengTotal}}株
              span.lh-title4(data-title="3000BPX") {{item.totalValue+gametype}}
              span.lh-title4(data-title="3000BPX") {{item.isPass?'审核通过':'未审核'}}
              span.lh-title5(data-title="2018-07-14 16:00") {{item.operatingDate}}

  //
</template>

<script>
import $ from "jquery";
import ginsengNav from "../ginseng_nav.vue";
export default {
  name: "assets",
  data() {
    return {
      list: {},
      userInfo: u.getStore("userInfo"),
      gametype: u.getStore("winning").type
    };
  },
  created() {
    let timer = setInterval(() => {
      if (u.flag) {
        this.userInfo = u.getStore("userInfo");
        u.sellListGinseng({ phone: u.getStore("user").userid }, data => {
          if (data && data[0] && data[0].ginsengSellReCordList) {
            this.list = data[0].ginsengSellReCordList;
          }
        });
        clearInterval(timer);
      }
    }, 10);
  },
  computed: {
    listmost() {
      return (
        this.userInfo.one_ginseng * u.getStore("winning").oneGinseng +
        this.userInfo.two_ginseng * u.getStore("winning").twoGinseng +
        this.userInfo.three_ginseng * u.getStore("winning").threeGinseng +
        this.userInfo.one_best_ginsen * u.getStore("winning").oneBestGinseng +
        this.userInfo.two_best_ginsen * u.getStore("winning").twoBestGinseng +
        this.userInfo.three_best_ginsen * u.getStore("winning").threeBestGinseng
      );
    }
  },
  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
  },
  components: {
    "v-ginsengNav": ginsengNav
  },
  methods: {
    changePage() {
      this.$router.push({ path: "/sold" });
    }
  }
};
</script>

<style  lang="stylus" scoped>
.container {
  padding: 20px 0;
  width: 100%;
  min-width: 1200px;
  min-height: 968px;
  background-image: url('../../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .mainContainer {
    margin: 0 auto;
    max-width: 1290px;

    .content {
      display: inline-block;
      margin-left: 2%;
      width: 80%;
      height: 900px;
      vertical-align: top;

      .a-amount {
        padding: 30px 24px;
        width: 100%;
        height: 287px;
        background-image: url('../../../static/image/assetsbg1.png');
        background-size: 100% 100%;

        .assets {
          display: inline-block;

          &:first-child {
            margin-right: 100px;
          }

          .a-title {
            margin-right: 40px;
            display: inline-block;
            position: relative;
            font-size: 18px;
            color: white;
            z-index: 0;
            vertical-align: top;

            &:before {
              content: attr(data-title);
              position: absolute;
              -webkit-text-stroke: 3px #3a230a;
              z-index: -1;
            }
          }

          ul {
            display: inline-block;
            vertical-align: top;

            li {
              margin-bottom: 8px;
              font-size: 20px;
              color: white;

              >span {
                position: relative;
                z-index: 0;

                &:before {
                  content: attr(data-title);
                  position: absolute;
                  -webkit-text-stroke: 3px #a56a2c;
                  z-index: -1;
                }
              }

              >span:nth-of-type(2) {
                text-shadow: 0 2px #a56a2c, 2px 0 #a56a2c, -2px 0 #a56a2c, 0 -1px #a56a2c;
              }
            }
          }
        }

        .a-worth {
          margin-top: 75px;
          display: flex;
          align-items: center;

          .aw-title {
            display: inline-block;
            position: relative;
            font-size: 18px;
            color: white;
            z-index: 0;

            &:before {
              content: attr(data-title);
              position: absolute;
              -webkit-text-stroke: 3px #3a230a;
              z-index: -1;
            }
          }
        }
      }
    }

    .aw-value {
      margin-left: 15px;
      display: inline-block;
      position: relative;
      font-size: 22px;
      color: white;
      text-shadow: 0 1px red, 2px 0 red, -2px 0 red, 0 -1px red;
    }

    z-index 0 {
      &:before {
        content: attr(data-title);
        position: absolute;
        -webkit-text-stroke: 3px #ca4737;
        z-index: -1;
      }
    }

    .aw-btn {
      margin-left: 30px;
      display: inline-block;
      position: relative;
      width: 146px;
      height: 43px;
      text-align: center;
      font-size: 14px;
      color: white;
      line-height: 39px;
      z-index: 0;
      background-image: url('../../../static/image/z_1.png');
      cursor: pointer;

      &:before {
        content: attr(data-title);
        position: absolute;
        -webkit-text-stroke: 3px #9c130b;
        z-index: -1;
      }
    }

    .salesRecord {
      margin-top: 18px;
      padding: 20px 26px;
      width: 100%;
      height: 653px;
      background-image: url('../../../static/image/assetsbg2.png');
      background-size: 100% 100%;

      .sr-title {
        margin: 0 auto;
        width: 300px;
        height: 76px;
        font-weight: bold;
        font-size: 20px;
        color: white;
        text-align: center;
        line-height: 47px;
        background-image: url('../../../static/image/z_3.png');
        background-size: 100% 100%;
        position: relative;
        z-index: 0;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 5px #1c6b65;
          z-index: -1;
        }
      }

      .list-head {
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        margin-bottom: 15px;
        width: 98%;
        height: 70px;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        background-image: url('../../../static/image/z_4.png');
        background-size: 100% 100%;

        span {
          display: inline-block;
          text-align: center;
          text-shadow: 0 2px #a6600b, 2px 0 #a6600b, -2px 0 #a6600b, 0 -2px #a6600b;
        }

        .lh-title1 {
          width: 7%;
        }

        .lh-title2 {
          width: 9%;
        }

        .lh-title3 {
          width: 10%;
        }

        .lh-title4 {
          width: 12%;
        }

        .lh-title5 {
          width: 24%;
        }
      }

      ul {
        max-height: 390px;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 10px;
        }

        &::-webkit-scrollbar-track-piece {
          background-color: #ebcf8f;
          -webkit-border-radius: 5px;
        }

        &::-webkit-scrollbar-thumb:vertical {
          background-color: #b6e866;
          -webkit-border-radius: 5px;
        }

        li {
          display: flex;
          justify-content: space-around;
          width: 99%;
          height: 65px;
          line-height: 65px;
          font-size: 20px;
          color: white;
          background-image: url('/static/image/z_5.png');
          background-size: 100% 100%;

          span {
            display: inline-block;
            text-align: center;
            text-shadow: 0 2px #3a230a, 2px 0 #3a230a, -2px 0 #3a230a, 0 -1px #3a230a;
          }

          .lh-title1 {
            width: 7%;
          }

          .lh-title2 {
            width: 9%;
          }

          .lh-title3 {
            width: 10%;
          }

          .lh-title4 {
            width: 12%;
          }

          .lh-title5 {
            width: 24%;
          }
        }
      }
    }
  }
}
</style>
